<template>
  <div>
    <Row class="home-page-content" align="middle">
      <BtnPlain class="com-action-btn" type="primary" @click="goBack">返回</BtnPlain>
      <h3>审核历史</h3>
    </Row>

    <div class="home-page-content mt-20">
      <Table :columns="columns" :data="listData">
        <template slot="type">变更</template>
        <template slot-scope="{ row }" slot="beforeChange">
          <BtnText type="primary" @BtnClick="onBefore(row)">信息查看</BtnText>
        </template>
        <template slot-scope="{ row }" slot="auditStatus">
          <BtnPlain :type="row.auditStatus | getAuditStatus">{{ row.auditStatusName }}</BtnPlain>
        </template>
        <template slot-scope="{ row }" slot="afterChange">
          <BtnText type="primary" @BtnClick="onAfter(row)">信息查看</BtnText>
        </template>
      </Table>
    </div>

    <Modal v-model="modalValue" width="1100" title="信息详情" footer-hide>
      <InfoPage v-if="type === 'info'" :info="info" isHistory />
      <RulePage v-if="type === 'rule'" :info="info" isHistory />
    </Modal>
  </div>
</template>

<script>
import { getCompanyChangeHistory, getCompanyChangeHistoryData } from '@/api/enterpriseManage.js'
import InfoPage from './common/infoPage.vue'
import RulePage from './common/rulePage.vue'

export default {
  name: 'enterpriseHistory',
  components: { InfoPage, RulePage },
  data () {
    return {
      companyId: '',
      type: '',
      columns: [
        {
          title: '变更时间',
          key: 'updateDateTime',
          width: 170,
        },
        {
          title: '变更类型',
          slot: 'type',
        },
        {
          title: '变更前',
          slot: 'beforeChange',
        },
        {
          title: '审核状态',
          slot: 'auditStatus',
        },
        {
          title: '变更后',
          slot: 'afterChange',
        },
        {
          title: '拒绝理由',
          key: 'rejectReason',
        },
      ],
      listData: [],
      modalValue: false,
      info: {},
    }
  },
  async created () {
    const { companyId, type } = this.$route.query
    this.companyId = companyId
    this.type = type
    this.listData = await getCompanyChangeHistory({ companyId, changeType: type === 'info' ? 1 : 2 })
  },
  methods: {
    async getInfo (id, dataType) {
      this.modalValue = true
      const info = await getCompanyChangeHistoryData({ id, dataType })
      info.serviceTypeName = info.serviceType.map((o) => o.serviceTypeName).join("，")
      info.serviceAreaName = info.serviceArea.map((o) => o.provinceName + '-' + o.cityName).join("，")
      info.companyAptitudeFiles = info.companyAptitudeHistoryVos

      info.auditStatus
      info.auditStatusName
      info.updateDateTime
      info.companyOffReason
      this.info = info
    },
    // 变更前
    onBefore (row) {
      this.getInfo(row.id, 0)
    },
    // 变更后
    onAfter (row) {
      this.getInfo(row.id, 1)
    },
    goBack () {
      this.$router.replace({ path: '/myEnterprise' })
    }
  }
}
</script>

<style lang='less' scoped>
.modal-info {
  height: 600px;
  overflow: scroll;
}
.mt-20 {
  margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>
